{extend name="layout/layout" /}

{block name="content"}
<style>
    .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td{
        line-height: 40px;
        padding: 0;
    }
</style>

<div class="row js-check-wrap">
    <div class="col-lg-12">
        <div class="portlet light">
            <div class="box-header">
                <div class="row">
                    <div class="col-md-12">
                        <div class="pull-right">
                            <button class="btn blue btn-circle AddCategory"><i class="fa fa-plus"></i> 添加</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="portlet-body">
                <form class="js-ajax-form" method="post">
                    <div class="">
                        <table id="data-table" class="table table-bordered table-hover dataTable">
                            <thead>
                            <th>分类</th>
                            <th>排序</th>
                            <th>操作</th>
                            </thead>
                            <tbody>
                            {volist name="list" id="vo"}
                            <tr role="row" class="odd">
                                <td class="name">{$vo.name}</td>
                                <td class="sort">{$vo.sort}</td>
                                <td>
                                    <button type="button" class="btn btn-success edit-btn" data-id="{$vo.id}">编辑</button>
                                    <button type="button" class="btn btn-danger delete-btn" data-id="{$vo.id}">删除</button>
                                </td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 详情 模态框 -->
<div class="modal fade" id="view-modal" data-backdrop="static" data-keyboard="false" >
    <div class="modal-dialog" style="width:800px; height: 520px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">x</button>
                <h4 class="modal-title">分类管理</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="portlet light" style="margin-bottom: 0;">
                            <div class="portlet-body">
                                <form method="post" class="form-horizontal" name="ajaxForm">
                                    <div class="">
                                        <div class="row">
                                            <div class="col-md-9">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">
                                                        分类名
                                                        <span class="required">*</span>
                                                    </label>
                                                    <div class="col-md-9">
                                                        <input type="text" class="form-control" placeholder="标题名称，最多40字" id="name" maxlength="40" data-required="1" name="name" value="" required>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-9">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">
                                                        排序
                                                    </label>
                                                    <div class="col-md-4">
                                                        <input type="text" class="form-control" id="sort" maxlength="8" name="sort" value="">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="id" value="">
                                    <input type="hidden" name="c_type" value="1">
                                    <div class="modal-footer">
                                        <button type="button" class="btn blue saveSpeed-btn"> 确定 </button>
                                        <button type="button" class="btn default" data-dismiss="modal"> 关闭 </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" class="savecategory_url" value="{:url('admin/'.strtolower($model).'/savecategory')}">
<input type="hidden" class="delcategory_url" value="{:url('admin/'.strtolower($model).'/delCategory')}">
{/block}

{block name="pagescript"}
<script>
    var Category = function() {
        var savecategory_url = $('.savecategory_url').val();
        var delcategory_url = $('.delcategory_url').val();

        return {
            init: function() {

                this.onEvent();
            },

            onEvent : function(){

                // 增加分类
                $('.AddCategory').on('click',function () {
                    $('#view-modal').modal('show');
                });

                // 编辑分类
                $('.edit-btn').on('click',function () {
                    var id = $(this).data('id');
                    var name = $(this).parents('tr').find('.name').text();
                    var sort = $(this).parents('tr').find('.sort').text();

                    $('#view-modal').find('input[name=id]').val(id);
                    $('#view-modal').find('input[name=name]').val(name);
                    $('#view-modal').find('input[name=sort]').val(sort);
                    $('#view-modal').modal('show');
                });

                $('.saveSpeed-btn').on('click',function () {
                    var form = this.form;
                    if(form.name.value.trim()==''){
                        layer.msg('请填写分类名');
                        form.name.focus();
                        return;
                    }

                    var _data = $(form).serializeObject();
                    $(".saveSpeed-btn").attr("disabled","disabled");

                    $.ajax({
                        url : savecategory_url,
                        type : 'post',
                        dataType : 'json',
                        contentType : "application/json; charset=utf-8",
                        data : JSON.stringify(_data),
                    }).done(function(data) {
                        if (data.code == 1) {
                            layer.msg('保存成功');
                            window.location.href= data.url; //加载页面数据
                        } else if (data.code == 0 ) {  // 错误
                            $(".saveSpeed-btn").removeAttr("disabled");
                            layer.msg(data.msg);
                        }
                    });

                });

                $('.delete-btn').on('click',function () {
                    var id = $(this).data('id');
                    var text = '是否要删除这个分类？';
                    var title = '请确认';
                    var confirmBtn = '确定';
                    var cancelBtn = '取消';
                    layer.confirm(
                        text,
                        {
                            title: title,
                            btn: [confirmBtn, cancelBtn]
                        },
                        function(index){
                            layer.close(index);

                            $.ajax({
                                url : delcategory_url,
                                type : 'post',
                                dataType : 'json',
                                contentType : "application/json; charset=utf-8",
                                data : JSON.stringify({'id':id}),
                            }).done(function(data) {
                                if (data.code == 1) {
                                    layer.msg('删除成功');
                                    window.location.href= data.url; //加载页面数据
                                } else if (data.code == 0 ) {  // 错误
                                    $(".saveSpeed-btn").removeAttr("disabled");
                                    layer.msg(data.msg);
                                }
                            });
                        }
                    );

                });

            }
        };

    }();

    $(function() {
        Category.init();
    });

</script>
{/block}